
<div id="demoWrapper">
	<hr />
	<h5 id="status"></h5>
	<form id="demoForm" method="post" action="json.html" class="bbq">
		<div id="fieldWrapper">
			<fieldset class="step" id="first">
				<h1>First step - Name</h1>
				<br /> <label for="firstname">First name</label><br /> <input
					class="input_field_12em" name="firstname" id="firstname" /><br /> <label
					for="surname">Surname</label><br /> <input class="input_field_12em"
					name="surname" id="surname" /><br />
			</fieldset>
			<fieldset id="finland" class="step">
				<h1>Step 2 - Personal information</h1>
				<br /> <label for="day_fi">Social Security Number</label><br /> <input
					class="input_field_25em" name="day" id="day_fi" value="DD" /> <input
					class="input_field_25em" name="month" id="month_fi" value="MM" /> <input
					class="input_field_3em" name="year" id="year_fi" value="YYYY" /> -
				<input class="input_field_3em" name="lastFour" id="lastFour_fi"
					value="XXXX" /><br /> <label for="countryPrefix_fi">Phone number</label><br />
				<input class="input_field_35em" name="countryPrefix"
					id="countryPrefix_fi" value="+358" /> - <input
					class="input_field_3em" name="areaCode" id="areaCode_fi" /> - <input
					class="input_field_12em" name="phoneNumber" id="phoneNumber_fi" /><br />

				<label for="myemail">*Email</label><br /> <input
					class="input_field_12em email required" name="myemail" id="myemail" /><br />
			</fieldset>
			<fieldset id="confirmation" class="step">
				<h1>Last step - Username</h1>
				<br /> <label for="username">User name</label><br /> <input
					class="input_field_12em" name="username" id="username" /><br /> <label
					for="password">Password</label><br /> <input
					class="input_field_12em" name="password" id="password"
					type="password" /><br /> <label for="retypePassword">Retype
					password</label><br /> <input class="input_field_12em"
					name="retypePassword" id="retypePassword" type="password" /><br />
			</fieldset>
		</div>
		<div id="demoNavigation">
			<input class="navigation_button" id="back" value="Back" type="reset" />

			<input class="navigation_button" id="next" value="Next" type="submit" />
		</div>
	</form>
	<div style="float:center;width:300px;padding:20px;">
		<a href="cwelcome">Click Here </a> to go Back to Shopping Cart
	</div>
	<hr />

	<p id="data"></p>
</div>

<script type="text/javascript">
<!--
	$(document).ready(function(){

		//Get HTML Content
			var dataString='&wfid=15';
			$.ajax({
				type: "POST",
				url: "<?php print base_url(); ?>cart/gethtml",
				data: dataString,
				success : function(data){
					console.log(data);
					$('#fieldWrapper').html(data);

					$("#demoForm").formwizard({ 
					 	formPluginEnabled: true,
					 	validationEnabled: true,
					 	focusFirstInput : true,
					 	remoteAjax : {"shipping" : { // add a remote ajax call when moving next from the second step
					 		url : "<?php print base_url(); ?>cart/shipping", 
					 		dataType : 'json',
					 		success : function(data){
					 			/*if(data.emailtaken){ // change this value to false in validate.html to simulate successful validation
						 			$("#status").fadeTo(500,1,function(){
						 				$(this).html(data.emailerrormessage).fadeTo(5000, 0) 
						 			}); 
					 				return false; //return false to stop the wizard from going forward to the next step (this will always happen)
					 			}*/
					 			$('#shipping-confirmation').html(data.content);
					 			return true; //return true to make the wizard move to the next step
					 		}
					 	},
					 	"confirmation" : { // add a remote ajax call when moving next from the second step
					 		url : "<?php print base_url(); ?>cart/confirmation", 
					 		dataType : 'json',
					 		success : function(data){
					 			return true; //return true to make the wizard move to the next step
					 		}
					 	},
						 "makepayment" : { // add a remote ajax call when moving next from the second step
					 		url : "<?php print base_url(); ?>cart/validatecard", 
					 		dataType : 'json',
					 		beforeSend : function(){alert("Making payment...Please dont refresh")},
					 		complete : function(){alert("Payment Successfull.")},
					 		success : function(data){
					 			return true; 
					 		}
					 	}}	
					 }
					);
				}
			});

		


	});
//-->
</script>
